<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode: "511b21067928ac8721ede004da66c51d",
        }
    </script>
    <script src="https://webapi.amap.com/loader.js"></script>
    <script type="text/javascript">
        AMapLoader.load({
            key: "532d1fd8f154a7b1000493d3118afcf7",  // 申请好的Web端开发者Key，首次调用 load 时必填
            version: "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        }).then((AMap) => {
            const map = new AMap.Map('container', {
                center: [104.05843, 30.53565],
                zoom: 15,
            });
            //添加点标记
            const marker = new AMap.Marker({
                position: [104.05843, 30.53565] //位置
            })
            map.add(marker); //添加到地图
        }).catch((e) => {
            console.error(e);  //加载错误提示
        });   
    </script>


</head>

<body class="dpflex  fdcolumn">
    <main class="flex1 ofs  dpflex  fdcolumn">
        <div class="run-space">
            <p>目前累积跑步距离：</p>
            <p>
                <span id="number">40</span>
                公里
            </p>
        </div>
        <div class="flex1" id="container">
            <div id="title">
                <div>户外跑</div>
                <div>燃脂跑</div>
                <div>跑步机</div>
            </div>
            <div id="GOBtn">GO</div>

             <div id="setObject">设置目标 ></div>
        
        </div>
    </main>
  
    <!-- 蒙层 -->
    <section  id="mask" class="mask"></section>





</body>


</html>